<template>
  <div class="edit_container">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @change="onEditorChange($event)"
    ></quill-editor>
  </div>
</template>  

<script>
import { quillEditor } from 'vue-quill-editor' // 调用富文本编辑器
import hljs from 'highlight.js' // 语法高亮

export default {
  name: 'editor',
  components: {
    quillEditor
  },
  data() {
    return {
      content: '', //内容
      editorOption: { //富文本编辑器配置
        placeholder: '请输入文本...',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], //引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], //列表
            [{ script: 'sub' }, { script: 'super' }], // 上下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], //字体
            [{ align: [] }], //对齐方式
            ['clean'], //清除字体样式
            ['image', 'video'] //上传图片、上传视频
          ],
          syntax: {
            highlight: text => hljs.highlightAuto(text).value // 代码高亮需要配置的地方
          }
        }
      }
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  methods: {
    // 准备编辑器
    onEditorReady(editor) {},
    // 失去焦点事件
    onEditorBlur() {},
    // 获得焦点事件
    onEditorFocus(val, editor) {
      editor.enable(false) // 在获取焦点的时候禁用
    },
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      this.content = html
    }
  }
}
</script>

<style lang="sass">
.edit_container 
  padding-left: 50px

.ql-editor 
  line-height: normal !important
  height: 600px

.ql-snow .ql-tooltip[data-mode='link']::before 
  content: '请输入链接地址:'

.ql-snow .ql-tooltip.ql-editing a.ql-action::after 
  border-right: 0px
  content: '保存'
  padding-right: 0px

.ql-snow .ql-tooltip[data-mode='video']::before 
  content: '请输入视频地址:'

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before 
  content: '14px'

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before 
  content: '10px'

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before 
  content: '18px'

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before 
  content: '32px'

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before 
  content: '文本'

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before f
  content: '标题1'

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before 
  content: '标题2'

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before 
  content: '标题3'

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before 
  content: '标题4'

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before 
  content: '标题5'

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before 
  content: '标题6'

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before 
  content: '标准字体'

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before 
  content: '衬线字体'

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before 
  content: '等宽字体'

</style>